<template>
	<view class="c-content">
		<view class="title">{{ titleName }}</view>
		<view class="list pt-4 pl-4 flex ">
			<view @click="GoodDetail(item)" style="cursor: pointer;" class="list-item hover" v-for="(item, index) in Goods" :key="index">
				<view class="proinfo-list mt-4 flex flex-column align-center">
					<image class="border pro-img rounded-lg" style="box-sizing: border-box; border-width:8rpx ;" :class="'border-'+ThemeColors" :src="Domain_IMG+item.Picture_URL" mode="scaleToFill" />
					<p class="font">{{ item.Article_Name }}</p>
					<view class="pro-price">{{ item.Sales_Unit_Price }}元/{{item.Unit}}</view>
					<!-- <view class="tag-list">
						<view class="tag" v-for="(item, index) in item.tag" :key="index">{{item}}</view>
					</view> -->
					<p class="shop">{{ item.Category_Name }}</p>
					<view class="address">
						<view class="cuIcon-location"></view>{{ item.Enterprise_Name }}
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import { GroupGoodsAll } from '@/api/group.js'
	const app = getApp();
	export default {
		name: "grzxsytab",
		props: {
			titleName: {
				type: String,
				default: "",
			},
		},
		data() {
			return {
				ThemeColors:app.globalData.ThemeColors,
				Domain_IMG:app.globalData.Domain_IMG,
				Goods:[],
				list: [
					// {
					// 	"title": "绿宝石/一级绿无核绿干/2级半绿无核葡萄干",
					// 	"img": "https://image.cnhnb.com/image/jpg/2023/08/26/909a04a0536f4db2a5bdbcae4adbaf55.jpg?imageView2/1/w/351/h/351/format/jpg/interlace/1/q/100!/ignore-error/1",
					// 	"price": "3.30元/斤",
					// 	"shop": "高昌区天山果园瓜果商行",
					// 	"address": "陕西澄城县",
					// 	"tag": [
					// 		"保证金2000元",
					// 		"48小时发货",
					// 		"48小时发货"
					// 	]
					// },
					// {
					// 	"title": "苹果",
					// 	"img": "https://image.cnhnb.com/image/png/head/2021/12/04/83c0a416c3124ae591c6944d99e3367b.png?imageView2/1/w/351/h/351/format/jpg/interlace/1/q/100!/ignore-error/1",
					// 	"price": "5.00元/斤",
					// 	"shop": "果园商店",
					// 	"address": "某某省某某市",
					// 	"tag": [
					// 		"农场直供",
					// 		"新鲜水果"
					// 	]
					// },
					// {
					// 	"title": "香蕉",
					// 	"img": "https://image.cnhnb.com/image/jpg/2023/09/19/d44207ff53534d088c2bc14503047374.jpg?imageView2/1/w/351/h/351/format/jpg/interlace/1/q/100!/ignore-error/1",
					// 	"price": "2.50元/斤",
					// 	"shop": "水果超市",
					// 	"address": "某某省某某市",
					// 	"tag": [
					// 		"特价",
					// 		"季节水果"
					// 	]
					// },
					// {
					// 	"title": "香蕉",
					// 	"img": "https://image.cnhnb.com/image/jpg/2023/09/19/d44207ff53534d088c2bc14503047374.jpg?imageView2/1/w/351/h/351/format/jpg/interlace/1/q/100!/ignore-error/1",
					// 	"price": "2.50元/斤",
					// 	"shop": "水果超市",
					// 	"address": "某某省某某市",
					// 	"tag": [
					// 		"特价",
					// 		"季节水果"
					// 	]
					// },
					// {
					// 	"title": "香蕉",
					// 	"img": "https://image.cnhnb.com/image/jpg/2023/09/19/d44207ff53534d088c2bc14503047374.jpg?imageView2/1/w/351/h/351/format/jpg/interlace/1/q/100!/ignore-error/1",
					// 	"price": "2.50元/斤",
					// 	"shop": "水果超市",
					// 	"address": "某某省某某市",
					// 	"tag": [
					// 		"特价",
					// 		"季节水果"
					// 	]
					// },
					// {
					// 	"title": "香蕉",
					// 	"img": "https://image.cnhnb.com/image/jpg/2023/09/19/d44207ff53534d088c2bc14503047374.jpg?imageView2/1/w/351/h/351/format/jpg/interlace/1/q/100!/ignore-error/1",
					// 	"price": "2.50元/斤",
					// 	"shop": "水果超市",
					// 	"address": "某某省某某市",
					// 	"tag": [
					// 		"特价",
					// 		"季节水果"
					// 	]
					// },
					// {
					// 	"title": "香蕉",
					// 	"img": "https://image.cnhnb.com/image/jpg/2023/09/19/d44207ff53534d088c2bc14503047374.jpg?imageView2/1/w/351/h/351/format/jpg/interlace/1/q/100!/ignore-error/1",
					// 	"price": "2.50元/斤",
					// 	"shop": "水果超市",
					// 	"address": "某某省某某市",
					// 	"tag": [
					// 		"特价",
					// 		"季节水果"
					// 	]
					// }
				],
			};
		},
		methods: {
			fetchData() {
				uni.request({
					url: app.globalData.Domain_Name + "/grzxtablist.json",
					success: (res) => {
						this.list = res.data;
						console.log("请求成功", res);
					},
					fail: (err) => {
						console.error("请求失败", err);
					},
				});
			},
			async getData(){
				const res = await GroupGoodsAll({data:{
					Article_Name: "",
					page: 1,
					limit: 10,
					Category_SerialNumber: "",
					sort: 0,
				}})
				this.Goods = res.tableData
			},
			GoodDetail(item){
				sessionStorage.setItem(
					"Article_SerialNumber", item.Article_SerialNumber
				)
				sessionStorage.setItem(
					"Sales_Unit_Price_SerialNumber", item.Sales_Unit_Price_SerialNumber
				)
				sessionStorage.setItem(
					"Store_SerialNumber", item.Store_SerialNumber
				)
				uni.navigateTo({
					url:'/pages/index/goodsdetail'
				})
			}
		},
		mounted() {
			// this.fetchData();
			//普通商品
			this.getData()
		},
	};
</script>

<style lang="scss" scoped>
	@media screen and (max-width: 375px) and (min-width: 0px) {

		/*媒体查询是用来设置样式的 当实际的屏幕大小满足条件时就执行样式 */
		.c-content {
			margin: 40rpx 0px 0px;

			.title {
				font-size: 34rpx;
				margin-bottom: 20rpx;
				text-align: center;
				font-weight: bold;
			}

			.list {
				box-sizing: border-box;
				display: flex;
				flex-direction: row;
				flex-wrap: wrap;
				padding: 0;
				justify-content: space-between;

				.list-item {
					width: calc((100% - 8px) / 2);
					font-size: 28rpx;
					background-color: #fff;
					border-radius: 10rpx;
					margin-top: 20rpx;

					.proinfo-list {
						width: 100%;
						margin: 0;

						.pro-img {
							width: 100%;
							height: 171px;
							border-radius: 10rpx 10rpx 0 0;
						}

						p {
							margin-top: 10rpx;
							color: #333;
							font-size: 28rpx;
							padding: 0 8px;
							height: 19px;
							line-height: 19px;
							white-space: nowrap;
							overflow: hidden;
							text-overflow: ellipsis;
							box-sizing: border-box;
						}

						.shop {
							display: none;
						}

						.pro-price {
							margin-top: 12rpx;
							color: #ff442f;
							font-size: 36rpx;
							padding: 0 8px;
						}

						.tag-list {
							margin-bottom: 5px;
							margin-left: -5px;
							display: flex;
							flex-wrap: wrap;
							justify-content: center;
							box-sizing: border-box;
							padding: 0px 4px;

							.tag {
								position: relative;
								margin-top: 10rpx;
								display: inline-block;
								padding: 6rpx 10rpx;
								margin-left: 10rpx;
								font-size: 24rpx;
								background: #eff4fb;
								border: 1px solid #8a9fcc;
								color: #4869af;
								border-radius: 4px;
							}
						}

						.address {
							display: none;
						}
					}
				}
			}
		}
	}

	/* w  768~992    blue */
	@media screen and (min-width: 768px) and (max-width: 992px) {
		.c-content {
			margin: 60rpx 0px 0px;

			.title {
				color: #28a745;
				font-size: 48rpx;
				margin-bottom: 24rpx;
			}

			.list {
				padding-bottom: 25rpx;
				box-sizing: border-box;
				background-color: #fff;
				display: flex;
				flex-direction: row;
				flex-wrap: wrap;

				// margin: 0 0 10rpx 0;
				.list-item {
					width: 20%;
					font-size: 28rpx;

					.proinfo-list {
						width: 360rpx;

						.pro-img {
							width: 360rpx;
							height: 360rpx;
						}

						p {
							margin-top: 10rpx;
							overflow: hidden;
							height: 64rpx;
							color: #333;
							font-size: 24rpx;
						}

						.shop {
							margin-bottom: 8rpx;
							white-space: nowrap;
							overflow: hidden;
							text-overflow: ellipsis;
							height: auto;
						}

						.pro-price {
							margin-top: 12rpx;
							color: #ff442f;
							font-size: 36rpx;
						}

						.tag-list {
							margin-bottom: 10rpx;
							margin-left: -10rpx;
							padding-bottom: 4rpx;
							display: flex;
							flex-wrap: wrap;

							.tag {
								position: relative;
								margin-top: 10rpx;
								width: fit-content;
								display: inline-block;
								padding: 6rpx 10rpx;
								margin-left: 10rpx;
								border-radius: 8rpx;
								border: 2rpx solid #ddd;
								font-size: 24rpx;
								color: #333;
							}
						}

						.address {
							display: flex;
							font-size: 24rpx;
							color: #999;
							white-space: nowrap;
							overflow: hidden;
							text-overflow: ellipsis;
							align-items: center;
						}
					}
				}
			}
		}
	}

	// /*  w  992~1200  pink*/
	@media screen and (min-width: 992px) and (max-width: 1200px) {
		.c-content {
			margin: 60rpx 0px 0px;

			.title {
				color: #28a745;
				font-size: 48rpx;
				margin-bottom: 24rpx;
			}

			.list {
				padding-bottom: 25rpx;
				box-sizing: border-box;
				background-color: #fff;
				display: flex;
				flex-direction: row;
				flex-wrap: wrap;

				// margin: 0 0 10rpx 0;
				.list-item {
					width: 20%;
					font-size: 28rpx;

					.proinfo-list {
						width: 360rpx;

						.pro-img {
							width: 360rpx;
							height: 360rpx;
						}

						p {
							margin-top: 10rpx;
							overflow: hidden;
							height: 64rpx;
							color: #333;
							font-size: 24rpx;
						}

						.shop {
							margin-bottom: 8rpx;
							white-space: nowrap;
							overflow: hidden;
							text-overflow: ellipsis;
							height: auto;
						}

						.pro-price {
							margin-top: 12rpx;
							color: #ff442f;
							font-size: 36rpx;
						}

						.tag-list {
							margin-bottom: 10rpx;
							margin-left: -10rpx;
							padding-bottom: 4rpx;
							display: flex;
							flex-wrap: wrap;

							.tag {
								position: relative;
								margin-top: 10rpx;
								width: fit-content;
								display: inline-block;
								padding: 6rpx 10rpx;
								margin-left: 10rpx;
								border-radius: 8rpx;
								border: 2rpx solid #ddd;
								font-size: 24rpx;
								color: #333;
							}
						}

						.address {
							display: flex;
							font-size: 24rpx;
							color: #999;
							white-space: nowrap;
							overflow: hidden;
							text-overflow: ellipsis;
							align-items: center;
						}
					}
				}
			}
		}
	}

	/*W  >1200:     purple*/
	@media screen and (min-width: 1200px) {
		.c-content {
			margin: 60rpx 0px 0px;

			.title {
				color: #28a745;
				font-size: 48rpx;
				margin-bottom: 24rpx;
			}

			.list {
				padding-bottom: 25rpx;
				box-sizing: border-box;
				background-color: #fff;
				display: flex;
				flex-direction: row;
				flex-wrap: wrap;

				// margin: 0 0 10rpx 0;
				.list-item {
					width: 20%;
					font-size: 28rpx;

					.proinfo-list {
						width: 360rpx;

						.pro-img {
							width: 360rpx;
							height: 360rpx;
						}

						p {
							margin-top: 10rpx;
							overflow: hidden;
							height: 64rpx;
							color: #333;
							font-size: 24rpx;
						}

						.shop {
							margin-bottom: 8rpx;
							white-space: nowrap;
							overflow: hidden;
							text-overflow: ellipsis;
							height: auto;
						}

						.pro-price {
							margin-top: 12rpx;
							color: #ff442f;
							font-size: 36rpx;
						}

						.tag-list {
							margin-bottom: 10rpx;
							margin-left: -10rpx;
							padding-bottom: 4rpx;
							display: flex;
							flex-wrap: wrap;

							.tag {
								position: relative;
								margin-top: 10rpx;
								width: fit-content;
								display: inline-block;
								padding: 6rpx 10rpx;
								margin-left: 10rpx;
								border-radius: 8rpx;
								border: 2rpx solid #ddd;
								font-size: 24rpx;
								color: #333;
							}
						}

						.address {
							display: flex;
							font-size: 24rpx;
							color: #999;
							white-space: nowrap;
							overflow: hidden;
							text-overflow: ellipsis;
							align-items: center;
						}
					}
				}
			}
		}
	}
</style>